<%-- 
    Document   : edit_doc.jsp
    Created on : June 04, 2013, 3:38:33 PM
    Author     : Mansur
--%>
<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" media="screen" />
        <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/loginstyle.css" />
        <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/prettyPhoto.css" />        
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
        <script src="${pageContext.request.contextPath}/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
        <title>Documents</title>
        <script type="text/javascript">
            $(document).ready(function() {
                $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: ''});
                $('.hide').hide();
                $('#remove').click(function() {
                    $('#document').val('');
                    $("#img_prev").attr("src", '');
                    $(".hide").hide();
                });
                window.opener.blockUI();
                 $('#loading-img').hide();

                $('form').submit(function() {
                    $('#loading-img').show();
                });
            });
            function readURL(input) {
                if(strEndsWith(input.value, "asf")
                      || strEndsWith(input.value, "avi")
                      || strEndsWith(input.value, "flv")
                      || strEndsWith(input.value, "mkv")
                      || strEndsWith(input.value, "mov")
                      || strEndsWith(input.value, "mp4")
                      || strEndsWith(input.value, "mpeg")
                      || strEndsWith(input.value, "rmvb")
                      || strEndsWith(input.value, "wmv")
                      || strEndsWith(input.value, "3gp")){
                  
                      $('#img_prev').attr('src', '${pageContext.request.contextPath}/images/icon/video/video.png').height(200);
                      $('.hide').show();                      
               }else if(strEndsWith(input.value, "doc")
                      || strEndsWith(input.value, "docx")
                      || strEndsWith(input.value, "xls")
                      || strEndsWith(input.value, "xlsx")
                      || strEndsWith(input.value, "ppt")
                      || strEndsWith(input.value, "pptx")
                      || strEndsWith(input.value, "pdf")){
                  if (strEndsWith(input.value, "doc") || strEndsWith(input.value, "docx")){
                        $('#img_prev').attr('src', '${pageContext.request.contextPath}/images/icon/microsoft/word.png').height(200);
                        $('.hide').show();
                    } else if (strEndsWith(input.value, "xls") || strEndsWith(input.value, "xlsx")){
                        $('#img_prev').attr('src', '${pageContext.request.contextPath}/images/icon/microsoft/excel.png').height(200);
                        $('.hide').show();
                    } else if (strEndsWith(input.value, "ppt") || strEndsWith(input.value, "pptx")){
                        $('#img_prev').attr('src', '${pageContext.request.contextPath}/images/icon/microsoft/powerpoint.png').height(200);
                        $('.hide').show();
                    } else{
                        $('#img_prev').attr('src', '${pageContext.request.contextPath}/images/icon/microsoft/adobe.png').height(200);
                        $('.hide').show();
                    }
                }else{
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();

                        reader.onload = function(e) {
                            $('#img_prev')
                                    .attr('src', e.target.result)
                                    .height(200);
                            $('.hide').show();
                        };

                        reader.readAsDataURL(input.files[0]);
                    }
                    else {
                        var img = input.value;
                        $('#img_prev').attr('src', img).height(200);
                        $('.hide').show();
                    }
                    $("#x").show().css("margin-right", "10px");
                }
            }
            
            function strEndsWith(str, suffix) {
                    return str.match(suffix+"$")==suffix;
            }

            function unblock() {
                window.opener.unblockUI();
            }

            function validate() {
                if ($('#document').val() === '') {
                    alert('No Document attached!!');
                    $('#document').focus();
                    return false;
                }
                return true;
            }
            
            function closed(){
                self.opener.refreshPage();
                self.close();
            }
        </script>
        <style>
            .validateTips { border: 1px solid transparent; padding: 0.3em; color: red; font-weight: bold}
        </style>
    </head>
    <body onunload="unblock();">
        <s:messages/>
        <s:errors/>
        <s:form beanclass="exatrez.stripes.action.ShipVisitAction" name="form1">
            <s:hidden name="visitId" />
            <div id="content">
                <div id="page-title">
                    <span class="title">Upload Documents</span>
                </div>
                <p>
                    <label>&nbsp;</label>
                    <s:file name="document" onchange="readURL(this);" id="document"/>                     
                </p>
                <p>
                    <img id="img_prev" src="#" alt="your image" class="hide"/>
                </p>
                <p>
                    <label>&nbsp;</label>
                    <s:button name="remove" value="Remove" class="btn hide" id="remove"/>    
                    <s:submit name="saveDoc" value="Upload" class="btn" onclick="return validate();"/>            
                  <img src="${pageContext.request.contextPath}/images/loading_img.gif" style="display:none" id="loading-img"/>

                </p>

                <p class="validateTips"><em>NOTE :</em>Right click the thumbnail image to save it.</p>
                <display:table class="tablecloth" name="${actionBean.listVisitFile}" requestURI="/shipVisit?editDocument" id="line">
                    <display:column title="No.">${line_rowNum}</display:column>
                    <display:column title="File Name" property="title" />
                    <c:if test="${line.contentType eq actionBean.forPdf}">
                        <display:column title="Thumbnail">
                            <a href="${pageContext.request.contextPath}/dokumen/view/shipVisit/${line.svFileId}" title="${line.title}">
                                <img src="${pageContext.request.contextPath}/images/icon/microsoft/adobe.png" width="50" height="50"/>
                            </a>
                        </display:column>
                    </c:if>
                    <c:if test="${line.contentType eq actionBean.forXlsx or line.contentType eq actionBean.forXls}">
                        <display:column title="Thumbnail">
                            <a href="${pageContext.request.contextPath}/dokumen/view/shipVisit/${line.svFileId}" title="${line.title}">
                                <img src="${pageContext.request.contextPath}/images/icon/microsoft/excel.png" width="50" height="50"/>
                            </a>
                        </display:column>
                    </c:if>
                    <c:if test="${line.contentType eq actionBean.forDocx or line.contentType eq actionBean.forDoc}">
                        <display:column title="Thumbnail">
                            <a href="${pageContext.request.contextPath}/dokumen/view/shipVisit/${line.svFileId}" title="${line.title}">
                                <img src="${pageContext.request.contextPath}/images/icon/microsoft/word.png" width="50" height="50"/>
                            </a>
                        </display:column>
                    </c:if>
                    <c:if test="${line.contentType eq actionBean.forPptx or line.contentType eq actionBean.forPpt}">
                        <display:column title="Thumbnail">
                            <a href="${pageContext.request.contextPath}/dokumen/view/shipVisit/${line.svFileId}" title="${line.title}">
                                <img src="${pageContext.request.contextPath}/images/icon/microsoft/powerpoint.png" width="50" height="50"/>
                            </a>
                        </display:column>
                    </c:if>
                    <c:if test="${line.contentType eq actionBean.forVideoMov and 
                                  line.contentType eq actionBean.forVideoMkv and 
                                  line.contentType eq actionBean.forVideoMp4 and 
                                  line.contentType eq actionBean.forVideoAvi and 
                                  line.contentType eq actionBean.forVideoMpeg and 
                                  line.contentType eq actionBean.forVideoWmv and 
                                  line.contentType eq actionBean.forVideoAsf and 
                                  line.contentType eq actionBean.forVideoFlv and 
                                  line.contentType eq actionBean.forVideoRmvb and 
                                  line.contentType eq actionBean.forVideo3gp}">
                        <display:column title="Thumbnail">
                            <a href="${pageContext.request.contextPath}/dokumen/view/shipVisit/${line.svFileId}" title="${line.title}">
                                <img src="${pageContext.request.contextPath}/images/icon/video/video.png" width="50" height="50"/>
                            </a>
                        </display:column>
                    </c:if>
                    <c:if test="${line.contentType ne actionBean.forPdf and
                                  line.contentType ne actionBean.forXlsx and
                                  line.contentType ne actionBean.forXls and
                                  line.contentType ne actionBean.forDocx and
                                  line.contentType ne actionBean.forDoc and
                                  line.contentType ne actionBean.forPptx and
                                  line.contentType ne actionBean.forPpt and 
                                  line.contentType ne actionBean.forVideoMov and 
                                  line.contentType ne actionBean.forVideoMkv and 
                                  line.contentType ne actionBean.forVideoMp4 and 
                                  line.contentType ne actionBean.forVideoAvi and 
                                  line.contentType ne actionBean.forVideoMpeg and 
                                  line.contentType ne actionBean.forVideoWmv and 
                                  line.contentType ne actionBean.forVideoAsf and 
                                  line.contentType ne actionBean.forVideoFlv and 
                                  line.contentType ne actionBean.forVideoRmvb and 
                                  line.contentType ne actionBean.forVideo3gp}">
                        <display:column title="Thumbnail">
                            <a href="${pageContext.request.contextPath}/dokumen/view/shipVisit/${line.svFileId}" rel="prettyPhoto[gallery1]" 
                               title="${line.title}">
                                <img src="${pageContext.request.contextPath}/dokumen/view/shipVisit/${line.svFileId}" width="50" height="50"/>
                            </a>
                        </display:column>
                    </c:if>
                    <display:column title="delete">
                        <a href="shipVisit?deleteFile&idFile=${line.svFileId}&idVisit=${actionBean.visitId}" onclick="return confirm('Are you sure to delete this file?');">
                            <img src="${pageContext.request.contextPath}/images/icon/gnome_edit_delete.png" alt="delete" width="20" height="20"/>
                        </a>
                    </display:column>
                </display:table>            
                <s:submit name="" value="CLOSE" class="btn" onclick="closed();"/>
            </s:form>
        </div>
    </body>
</html>
